<template>
	
	<div>
		<a-carousel arrows  autoplay>
		    <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1;margin-top:-40px" >
		      <!-- <a-icon type="left-circle" /> -->
		      <span  class='arrow  leftArrow'></span>
		    </div>
		    <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px;margin-top:-40px">
		      <span  class='arrow  rightArrow'></span>
		    </div>
		    <div class='bg-banner'></div>
		    <div class='bg-banner2'></div>
		    <div class='bg-banner3'></div> 
		  </a-carousel> 
		  <div  class='color-main  aboutus'><span  style="padding:0 20px"  class='fontWeight'>关于我们</span></div>

		  <ul  class='aboutus_content'>
        <a-row >
          <!-- 左侧col -->
          <a-col  :span='13'  class='col-index-card'>
            <!-- bg -->
            <div  class='bg-index-card  '> </div> 
            <!-- img -->
            <li  @mouseenter='hover(1)'  @mouseleave='leave(1)'   style="position: absolute; right: 0;bottom: 0;"><router-link to='/introduce#1'>
                <img  :src='imgSrcflag==false ? "static/img/home/about_company.png":"static/img/home/about_company-a.png" '  width="532" />
                <span  class='commonAbout'   v-if='imgSrcflag==true'><img  src='static/img/home/icon-company-a.png'  class='mb10'  height="42"><br />公司简介</span></router-link>
            </li>
          </a-col>
          <!-- 右侧col -->
          <a-col  :span='9'  offset='1'  class='col-index-card text-center'>
            <div  class="absolute"  style="top:50%;margin-top: -80px;">
              <div  class='index-card-banner '>公司简介</div> <br>
              铭帛科技主要是围绕与同安金所战略合作的框架下专属渠道推荐安金所挂牌产品及铭帛科技深耕供应链金融的核心内容。
            </div>
            
          </a-col>
        </a-row>
        <a-row  class='mt42'>
          <!-- 左侧col -->
          <a-col  :span='9'   class='col-index-card text-center'>
            <div  class="absolute"  style="top:50%;margin-top: -80px;">
              <div  class='index-card-banner '>服务介绍</div> <br>
              铭帛科技主要业务分为在售产品推荐区、可推荐资产区、发布信息合作区等3个主要板块。
            </div>
            
          </a-col> 
          <!-- 右侧col -->
          <a-col  :span='13'  offset='1' class='col-index-card'>
            <!-- bg -->
            <div  class='bg-index-card  fr'> </div> 
            <!-- img -->
            <li @mouseenter='hover(2)'  @mouseleave='leave(2)'  style="position: absolute; left: 0;bottom: 0;"><router-link to='/introduce#2'>
              <img  :src='imgSrcflag2==false? "static/img/home/about_service.png" :"static/img/home/about_service-a.png" '  width="532" />
              <span  class='commonAbout'  v-if='imgSrcflag2==true'><img  src='static/img/home/icon-money-a.png'  class='mb10' width="45"><br />服务介绍</span></router-link>
            </li>
          </a-col>
        </a-row>
		  	<a-row >
          <!-- 左侧col -->
          <a-col  :span='13'  class='col-index-card'>
            <!-- bg -->
            <div  class='bg-index-card  '> </div> 
            <!-- img -->
            <li  @mouseenter='hover(3)'  @mouseleave='leave(3)'  style="position: absolute; right: 0;bottom: 0;"><router-link to='/introduce#3'>
              <img  :src='imgSrcflag3==false ? "static/img/home/about_contact.png":"static/img/home/about_contact-a.png" '  width="532" />
              <span  class='commonAbout'  v-if='imgSrcflag3==true'><img  src='static/img/home/icon-phone-a.png'  class='mb10'  width="42"><br />联系我们</span></router-link>
            </li>
          </a-col>
          <!-- 右侧col -->
          <a-col  :span='9'  offset='1'  class='col-index-card text-center'>
            <div  class="absolute"  style="top:50%;margin-top: -80px;">
              <div  class='index-card-banner '>联系我们</div> <br>
              电话：0571-89996201 <br>
             邮箱：https://exmail.qq.com <br>
             地址：杭州市江干区华润大厦B座2601
            </div>
            
          </a-col>
        </a-row>
		  	
		  	
		  </ul>
	</div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return { 
       imgSrcflag:false,
       imgSrcflag2:false,
       imgSrcflag3:false,
    }
  },
  methods:{
  	hover(num){
  		if(num==1){
  			this.imgSrcflag = true 
  		}
  		if(num==2){
  			this.imgSrcflag2 = true  
  		}
  		if(num==3){
  			this.imgSrcflag3 = true  
  		}
  	},
  	leave(num){
  		if(num==1){
  			this.imgSrcflag = false  
  		}
  		if(num==2){
  			this.imgSrcflag2 = false  
  		}
  		if(num==3){
  			this.imgSrcflag3 = false  
  		}
  	}
  }
}
</script>


<style scoped="scoped">
  /*幻灯片 */
  .ant-carousel >>> .slick-slide { text-align: center;height: 360px; line-height: 160px;background: #364d79;overflow: hidden;}
  .ant-carousel >>> .custom-slick-arrow {  width: 30px;height: 50px;color: #fff;background-color: #57697F;opacity: 0.5;}
  .ant-carousel >>> .custom-slick-arrow:before {display: none;}
  .ant-carousel >>> .custom-slick-arrow:hover {opacity: 1;}
  .ant-carousel >>> .slick-slide h3 {color: #fff;}	
  /*幻灯片背景图*/ 
 .bg-banner{background:url('../../assets/img/home/banner.png') center;background-size: cover;height: 380px;}
 .bg-banner2{background:url('../../assets/img/home/banner2.png') center;background-size: cover;height: 380px;}
 .bg-banner3{background:url('../../assets/img/home/banner3.png') center;background-size: cover;height: 380px;} 
 .arrow{display: inline-block;width: 30px;height: 50px;}
 .leftArrow{background:url('../../assets/img/home/leftArrow.png') center  no-repeat;background-size: 12px;}
 .rightArrow{background:url('../../assets/img/home/rightArrow.png') center  no-repeat;background-size: 12px;}
/*关于我们 - title*/
 .aboutus{margin:40px auto 30px;text-align: center;font-size: 18px;width: 400px;} 
 .aboutus::before{display:inline-block;content:'';width: 120px;border-top:2px solid #1747A9;transform: translateY(-7px);-ms-transform:translateY(-7px);}
 .aboutus::after{display:inline-block;content:'';width: 120px;border-top:2px solid #1747A9;transform: translateY(-7px);-ms-transform:translateY(-7px);}

/*首页卡片背景*/
 .bg-index-card{width: 460px;height: 300px;background-color: #1E49A5;border-radius: 8px;}
 .index-card-banner{padding: 20px;border-bottom:2px solid  #FF9203;display: inline-block;margin:0 auto 26px;font-weight: 600;color:#FF9203;font-size: 18px;}
 /*卡片col*/
 .aboutus_content .col-index-card{position: relative;height: 440px;}
/*列表*/
 .aboutus_content{width: 1200px;margin:0 auto;font-size: 16px;padding-bottom: 50px;/*color:#fff;*/}
 .aboutus_content li{display: inline-block;margin-right: 20px;position: relative;}
 .aboutus_content li:hover{cursor: pointer;} 
 .aboutus_content li:last-child{margin-right: 0;}
 /*列表icon*/
 .commonAbout{display: inline-block;width: 90px;position: absolute;text-align: center;left:50%;margin-left: -45px;top:50%;margin-top: -45px;color: #FF9203;font-size: 18px;}

/*适配 宽度：1250 /// 776*/
 @media(max-width: 1250px){
 	.aboutus_content{width: 100%;}
 	.aboutus_content li{display: block;width: 40%;margin:20px auto;}
 	.aboutus_content li>img{width: 100%;}
 	 .aboutus_content li:last-child{margin-right: auto;}
 }
 @media(max-width: 776px){
 	.aboutus_content li{display: block;width: 80%;margin:20px auto;}
 }
</style>